<extend name="Home@Index/template"/>
<block name="title">
    一汽工业互联网平台
</block>
<block name="header_require_css">
    <style> 
        .xc_section{
            background: #eee;
            font-weight: lighter;
        }
        .xc_section a {
            text-decoration: none;
            padding: 10px 0;
            font-size:12px;
            color:#72767a;
        }

        .xc_section a:active, a:hover {
            text-decoration: none; /* 不显示下划线链接 */
            outline: 0;
        }

        .xc_section a:focus {
            background-color: #000;
            outline: 0; /* 不显示选中边框 */
        }

        .shadow {
            background: #fff;
            width: 31.33333%;
            height:400px;
            min-width: 300px; 
            margin: 10px;
            padding: 30px 20px;
            border-radius: 0.2em;
        }

        .shadow:hover
        {
            transition: all .3s ease-in-out;
            box-shadow: 0 2px 10px rgba(0,0,0,.5);
        }

        .shadow:hover img.Rotation{
            transform:rotate(-20deg);
        }

        .shadow:hover p.detail{
            color:#000;
        }

        .detail{
            margin: 10px;
            font-size:16px;
            color:#72767a;
        }

        .topArea1{
            background:#333;
            /*rgb(42, 48, 60);*/ 
            color:aliceblue; 
            font-weight: lighter;
            transition: all .3s ease-in-out; 
            box-shadow: 0 2px 4px rgba(0,0,0,.5);
            min-height:50%;
        }

        .topArea2 {
            margin: 30px 90px;
            font-size: 16px;
            font-weight: lighter;
            color: darkgray;
        }

    </style>
</block>
<!--头部需要的js-->
<block name="header_require_js">
    <script>
        var now = new Date();
        $(document).ready(function () {

            // 获取参数
            function GetQueryString(name)
            {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)
                    return  unescape(r[2]);
                return null;
            }

            var getData = GetQueryString("n");
            getData = "{$para}";
            $.getJSON("cfg/" + getData + ".json?t=" + now.getTime(), function (data) {
                // 设置主标题
                $('#title').text(data.Product.P_Title);
                // 设置概述
                $('#content').text(data.Product.P_Decs);
                // 设置特性
                var detail = $('#detail');
                if (data.Product_Features && data.Product_Features.length > 0) {
                    for (var i = 0; i < data.Product_Features.length; i++) {
                        var PF_Title = data.Product_Features[i].PF_Title;
                        var PF_Img = data.Product_Features[i].PF_Img;
                        var PT_Desc = data.Product_Features[i].PT_Desc;
                        // detail.append('<div class="col-md-4 column"><figure><img id="img1" alt="80x80" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/140/140/default.jpg" class="img-circle"/><figcaption><h2>' + date + '</h2 ><p>Donec id elit non mi porta gravida at eget metus. Fusce </p><p><a class="btn" href="#">View details »</a></p></figcaption></figure></div>');
                        detail.append('<div class="col-md-4 column shadow" >' +
                                '<img id="img1" class="Rotation" width="60px" alt="特性" src="' + PF_Img + '"/> ' +
                                '<h4 style="color: #373d41;">' + PF_Title + '</h4><p class="detail">' + PT_Desc + '</p>' +
                                '<p style="margin: 10px;"><a href="#">查看更多 »</a></p></div>');
                        // var ol = document.createElement("ol");
                        // for (var j = 0; j < data.updateText[i].description.length; j++) {
                        //     var li = document.createElement("li");
                        //     li.innerHTML = data.updateText[i].description[j];
                        //     ol.appendChild(li);
                        // }
                        // detail.append(ol);


                    }
                }
            });
        });
    </script>
</block>  

<block name="content">  

    <section class="xc_section">
        <div class="container" style="width: 100%;">
            <div class="row clearfix">
                <!--#6487C3-->
                <div class="col-md-12 column topArea1" >
                    <h3 id="title" class="text-center" style="font-weight: lighter;">加载中……</h3>
                    <dl>
                        <dt id="content" class="text-center topArea2" >
                            加载中……
                        </dt>
                    </dl>
                </div>
            </div>
            <p></p>
            <div class="row clearfix">
                <div id="detail" style="padding: 20px 30px 0;font-weight: lighter;"></div>
            </div>
        </div>
    </section>


</block>